<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:insert="common.html"></div>
</head>
<body>
<div class="container-fluid">
    <div class="row" style="height:800px">
        <div class="col-lg-2" style="background:#B15BFF;height:800px">
            <div id="tree"></div>
        </div>
        <div class="col-lg-10" style="height:800px">
            <!-- addtabs的导航栏 -->
            <ul class="nav nav-tabs" id="myTab"></ul>
            <!-- addtabs的内容 -->
            <div class="tab-content"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //在实际开发中，左侧的菜单栏一般是存放到数据库中的，而不是在页面写死
    function getTree() {
        var tree = [];
        $.ajax({
            url:"/menuController/getMenu",
            /* data:{username:$('[name="username"]').val(),password:$("[name='password']").val()},第一种方式 */
            data:{},//表单序列化
            dataType:"json",
            type:"post",
            async:false,
            success:function(data){
                tree = data;
            },
            error:function(){
                alert("系统错误，请联系管理员");
            }
        })
        return tree;
    }
    $('#tree').treeview({
        data: getTree(),
        //backColor:"red", 所有节点的背景颜色
        borderColor:"blue",//树的边框
        //checkedIcon:"glyphicon glyphicon-heart",
        //showCheckbox:true,//是否在节点前面加复选框
        collapseIcon:"glyphicon glyphicon-star-empty",
        emptyIcon:"glyphicon glyphicon-star-empty",
        expandIcon:"glyphicon glyphicon-star",
        onNodeSelected:function(event, data){
            console.log(data)
            if(data.nodes==undefined){
                $.addtabs.add({
                    id:data.id,
                    title:data.text,
                    url:""+data.url
                })
            }
        }
    });
</script>
</body>
</html>